import React, { createRef, useEffect, useRef, useState } from 'react'
import { message, Layout } from 'antd'

import Sidebar from './core/Sidebar'
import Toolbar from './core/Toolbar'
import Editor from './core/Editor'

import IMAGE_SHAPES from './shape/ImageShape'
import CARD_SHAPES from './shape/CardShape'
import SVG_SHAPES from './shape/stencils/svg-shape.xml'

import './App.less'
import EditorExecutor from './executor/EditorExecutor'
import PropsTabs from './core/Propsbar'
import { mxCell } from 'mxgraph'

const { Header, Sider, Content } = Layout

function EditorUI(props: any) {
  const graphRef = useRef(null)
  // 编辑器
  const [editor, setEditor] = useState<Editor>()
  // 当前选中的cells
  const [selectedCells, setSelectedCells] = useState<mxCell[]>([])
  // 画布高度
  const [layoutH, setLayoutH] = useState<number>()

  /**
   * 画布点击的回调
   * @param cells 当前选中的图形
   */
  const clickFunc = (cell: mxCell) => {}

  /**
   * 当选中的原始发生变化时
   * @param cells 选中的原始
   */
  const changeFunc = (cells: mxCell[]) => {
    console.log('处理 changeFunc')
    // setSelectedCells(cells)
  }
  const doubleClickFunc = () => {}
  /**
   * 自动保存的回调
   */
  const autoSaveFunc = () => {
    EditorExecutor.saveLocal()
  }

  /**
   * 添加新的Cell回调
   * @param currentCell
   */
  const cellCreatedFunc = (currentCell: mxCell) => {
    const allCells = editor?.getAllCells()

    let sameShapeNameCount = 0
    const { shapeName } = currentCell

    allCells &&
      Object.keys(allCells).forEach((index) => {
        if (allCells[index].shapeName === shapeName) {
          sameShapeNameCount += 1
        }
      })

    const labelName = currentCell.value

    editor?.renameCell(`${labelName}${sameShapeNameCount}`, currentCell)
  }

  const deleteFunc = () => {}
  const undoFunc = () => {}
  const copyFunc = () => {}
  const valueChangeFunc = () => {}

  useEffect(() => {
    // 初始化对象
    const editor = new Editor({
      container: graphRef.current as unknown as Element,
      clickFunc: clickFunc,
      changeFunc: changeFunc,
      doubleClickFunc: doubleClickFunc,
      autoSaveFunc: autoSaveFunc,
      cellCreatedFunc: cellCreatedFunc,
      deleteFunc: deleteFunc,
      undoFunc: undoFunc,
      copyFunc: copyFunc,
      valueChangeFunc: valueChangeFunc
      // IMAGE_SHAPES,
      // CARD_SHAPES,
      // SVG_SHAPES
    })

    //加载素材
    editor.loadShapes()

    // 保存编辑器句柄，供外部操作
    EditorExecutor.setEditor(editor)
    setEditor(editor)
    setLayoutH(window.innerHeight - 40)
    window.Editor = editor

    //读取暂存文件

    EditorExecutor.renderGraphFromCache()

    return () => {
      editor?.removeEventListeners()
    }
  }, [])

  return (
    <div className="editor-container">
      <Layout className="h-100%">
        <Toolbar editor={editor} updateDiagramData={() => {}} />
        <Layout style={{ height: layoutH + 'px' }}>
          <Sider width="235" theme="light">
            <Sidebar key="sidebar" editor={editor} />
          </Sider>
          <Content>
            <div className="graph-inner-container">
              <div
                className="graph-content"
                key="graphcontent"
                ref={graphRef}
                style={{ height: '100%' }}
              />
            </div>
          </Content>
          <Sider theme="light" width={240}>
            {' '}
            <PropsTabs editor={editor} />
          </Sider>
        </Layout>
      </Layout>
    </div>
  )
}

export default EditorUI
